import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const selectFileDocs= { source: { code: `selectFile := component.NewSelectFile("label", false, component.LayoutHorizontal, "action.octant.dev/uploadFile")`}}

export const selectFileView = {
  metadata: {
    type: 'selectFile',
  },
  config: {
    label: 'Open File',
    multiple: false,
    status: 'success',
    statusMessage: 'Success message',
    layout: 'compact',
    action: 'action.octant.dev/SelectFileAction'
  },
};

export const SelectFileStoryTemplate = args => ({
  template: `<app-view-select-file [view]= "view"></app-view-select-file>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Select File component</h1>
<h2>Description</h2>

<p>The Select File component is used to select a file or multiple files from a file system.

On electron, the file path is sent as part of the action payload whereas the binary will only send file metadata.
</p>
<h2>Example</h2>

<Meta title="Components/Select File" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Select File component"
         parameters={{ docs: selectFileDocs }}
         args= {{ view: selectFileView }}>
    { SelectFileStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Select File component" />
